<template>
    <div class="shou">
        <ChaView2>
            <h4>我的</h4>
        </ChaView2><br><br><br>
         <div class="my-t">
      <p>
        <span>我的订单</span
        ><img src="../assets/left_gray.png" alt="" />
      </p>
      <p>
        <span>优惠卷</span
        ><img src="../assets/left_gray.png" alt="" />
      </p>
      <p>
        <span>影院会员卡</span
        ><img src="../assets/left_gray.png" alt="" />
      </p>
    </div>
    <div class="my-b">
      <p>
        <span>你想看的电影</span
        ><img src="../assets/left_gray.png" alt="" />
      </p>
      <p>
        <span>看过的电影</span
        ><img src="../assets/left_gray.png" alt="" />
      </p>
    </div>
    <button @click="leave" class="button">点击退出</button>
        <DiCha></DiCha>
    <router-view/>
    </div>
</template>

<script>
import ChaView2 from '../components/ChaView2.vue'
import DiCha from '../components/DiCha.vue'
export default {
    components: {
        ChaView2,
        DiCha
    },
    data() {
        return {
        };
    },
    methods: {
          leave(){
        this.$router.push('/')
    }
    },
};
</script>

<style lang="scss">
.shou{
    width: 100vw;
    height: 100vh;
    background-color: #F3F3F3;
}
.my-t {
  width: 100%;
  height: 150px;
  background-color: #fff;
  p {
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    img {
      height: 15px;
    }
  }
  p:nth-of-type(3) {
    border: none;
  }
}
.my-b {
  height: 100px;
  margin-top: 15px;
  background-color: #fff;
  p {
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #eee;
    img {
      height: 15px;
    }
  }
  p:nth-of-type(2) {
    border: none;
  }
}
.button {
  width: 100vw;
  height: 50px;
  background-color: #076fa2;
  border: none;
  border-radius: 5px;
  color: #fff;
  margin-top: 20px;
  font-size: 16px;
}
</style>
